import React from 'react';
import {Row, Col, Layout, Popover, Button, Popconfirm,message} from 'antd';
import {
    withRouter
} from "react-router-dom";
import "antd/dist/antd.css";
import './HeadNav.css';
import wxsp from '../wxsp.jpg'

const {Header } = Layout;

const content = (
    <div className="popover-container">
        <img src={wxsp} alt="使用微信小程序"/>
    </div>
);

class HeadNav extends React.Component {
    constructor(props) {
        let storage = window.localStorage;
        super(props);
        this.state = {
            name: storage.getItem('name')
        }
    }

    logout = ()=>{
        let {history} = this.props;
        let storage = window.localStorage;
        storage.clear();
        history.push({pathname: '/login'});
        message.success('注销成功');
    };

    render() {
        return (<Header style={{position: 'fixed', zIndex: 1}}>
            <Row>
                <Col span={6}>
                    <div className="logo">
                        <h1>创意空间预定</h1>
                    </div>
                </Col>
                <Col span={3} offset={12}>
                    <div className="userName" style={{float:"right"}}>
                        <Popconfirm title="确定注销吗?" onConfirm={() => this.logout()}>
                            <Button type="link" >hi {this.state.name}</Button>
                        </Popconfirm>
                        {/*<Dropdown overlay={<Menu>*/}
                        {/*    <Menu.Item>*/}
                        {/*        <Button type="link" onClick={() => this.logout()}>注销</Button>*/}
                        {/*    </Menu.Item>*/}
                        {/*    <Menu.Item>*/}
                        {/*        <Button type="link" onClick={() => this.logout()}>重新绑定账号</Button>*/}
                        {/*    </Menu.Item>*/}
                        {/*</Menu>}>*/}
                        {/*    <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>*/}
                        {/*        hi {this.state.name}*/}
                        {/*    </a>*/}
                        {/*</Dropdown>*/}
                    </div>
                </Col>
                <Col span={3}>
                    <div className="wxImageContainer" style={{float:"right"}}>
                        <Popover content={content} title="Title" trigger="hover">
                            <Button type="link">使用微信小程序</Button>
                        </Popover>,
                    </div>
                </Col>
            </Row>
        </Header>);
    }
}

export default withRouter(HeadNav);
